<template>
  <div class="main">
    <!-- 轮播图 -->
    <div class="swapper">
      <el-carousel :height="swapperHeight" :autoplay="false" :initial-index="0">
        <el-carousel-item>
          <div class="content">
            <div>菜鸟先飞</div>
            <div><span class="typed"></span></div>
            <div class="more-button">
              <i class="el-icon-view"></i>
              <span>阅读更多</span>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item v-for="item in topArticles" :key="item.id">
          <div
            class="content"
            :style="' background-image:url( ' + item.cover + ')'"
          >
            <div>
              {{ item.title }}
            </div>
            <div>
              {{ item.summary }}
            </div>
            <div class="more-button">
              <i class="el-icon-view"></i>
              <span>阅读更多</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="book">
      <el-card class="box-card">
        <gradientAnimation class="bookcontent">
          <div>
            <div class="bookcontent-title">钱钟书《围城》</div>
            <div class="bookcontent-content">
              满天的星又密又忙，它们声息全无，而看来只觉得天上热闹。一梳月亮像形容未长成的女孩子，但见人己不羞缩，光明和轮廓都清新露，渐渐可烘衬夜景。小园草地里的小虫琐琐屑屑地在夜谈。不知那里的蛙群齐心协力地干号，像声浪给火煮得发沸。几星萤火优游来去，不像飞行，像在厚密的空气里漂浮；月光不到的阴黑处，一点萤火忽明，像夏夜的一只微绿的小眼睛。
            </div>
          </div>
        </gradientAnimation>

        <gradientAnimation>
          <div class="bookupdata">最近更新</div>
        </gradientAnimation>

        <div class="bookitem">
          <gradientAnimation
            class="bookbox"
            v-for="item in recommendArticles"
            :key="item.id"
          >
            <el-card
              body-style="height:calc(100% - 40px);display: flex;flex-direction: column;align-items: center;"
              class="boxcard"
              :style="' background-image:url( ' + item.cover + ')'"
            >
              <div class="bookitem-card-tag">学习笔记</div>
              <div class="bookitem-card-title">{{ item.title }}</div>
              <div class="bookitem-card-sectitle">{{ item.summary }}</div>
              <div class="bookitem-card-button">
                <div class="more-button-show">
                  <i class="el-icon-view"></i>
                  <span>阅读更多</span>
                </div>
              </div>
            </el-card>
          </gradientAnimation>
        </div>
      </el-card>
    </div>
    <div class="grid">
      <gradientAnimation
        class="grid-card-box"
        v-for="item in pageInfo.records"
        :key="item.id"
      >
        <el-card body-style="height:100%;padding:0;" class="grid-card">
          <div class="grid-card-bg">
            <img class="grid-card-bg-img" :src="item.cover" alt="" />
            <div class="grid-card-bg-text">{{ item.title }}</div>
          </div>
          <div class="grid-card-con">
            <div class="grid-card-con-text">
              {{ item.summary }}
            </div>
            <div class="grid-card-con-time">
              <span>2020-09-13</span>
              <span>工具技巧</span>
            </div>
            <div class="grid-card-con-tag">
              <span v-for="ite in item.tagList" :key="ite.id">{{ ite.name }}</span>
            </div>
          </div>
        </el-card>
      </gradientAnimation>
    </div>
    <!-- 分页 -->
    <div class="page">
      <div
        :class="['page-button', isFirstButton ? 'page-button-no' : '']"
        @click="changeArticles('<')"
      >
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="page-num">{{ currentPage }} / {{ allPage }}</div>
      <div
        :class="['page-button', isLastButton ? 'page-button-no' : '']"
        @click="changeArticles('>')"
      >
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import Typed from 'typed.js'
import { home, articles } from '@/api/api'
export default {
  props: {},
  components: {},
  data() {
    return {
      topArticles: [], //轮播图数据
      recommendArticles: [], //4个方格数据
      pageInfo: {}, //9宫格数据
      currentPage: 1, //当前页码
      allPage: 1 //总页码
    }
  },
  created() {
    // 获取首页数据
    this.getHomeInof()
  },
  mounted() {
    //打字机
    // this.typer()
  },
  computed: {
    //轮播图的高
    swapperHeight() {
      return document.documentElement.clientHeight + 'px'
    },
    //是否第一页
    isFirstButton() {
      return this.currentPage == 1
    },
    //是否最后一页
    isLastButton() {
      return this.currentPage == this.allPage
    }
  },
  watch: {
    pageInfo(newVal, oldVal) {
      this.currentPage = newVal.current
      this.allPage = newVal.pages
    }
  },
  methods: {
    //打字机
    typer() {
      var typed = new Typed('.typed', {
        strings: ['早起的鸟儿有虫吃，起晚了就就地躺下'], //输入内容, 支持html标签
        typeSpeed: 100, //打字速度
        backSpeed: 50, //回退速度
        loop: true
      })
    },
    //获取首页信息
    getHomeInof() {
      home().then((res) => {
        this.topArticles = res.topArticles
        this.recommendArticles = res.recommendArticles
        this.pageInfo = res.pageInfo

        //数据加载完毕后，传递信息
        this.$nextTick(() => {
          this.$emit('loaded')
        })
      })
    },
    //切换9宫格数据
    getArticles(page) {
      const param = { current: page }
      articles(param)
        .then((res) => {
          this.pageInfo = res

          this.$nextTick(() => {
            this.$emit('switchArticles')
          })
        })
        .catch((err) => {
          console.log('xy------', err)
        })
    },
    //点击左右按钮切换9宫格数据
    changeArticles(val) {
      switch (val) {
        case '<':
          if (this.isFirstButton) return
          this.getArticles(this.currentPage - 1)
          break
        case '>':
          if (this.isLastButton) return
          this.getArticles(this.currentPage + 1)
          break
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '../../style/main/main.less';
</style>
